<template>
  <div class="looksixiangxian">
    <div class="sixiangxian">
      <div class="box1" @click="myCreate(0)">
        <button>重要且紧急</button>
        <ul>
          <li v-for="(item, index) in arr1" :key="item.id">
            <span>{{ index + 1 }}</span> {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="box2" @click="myCreate(1)">
        <button>重要不紧急</button>
        <ul>
          <li v-for="(item, index) in arr2" :key="item.id">
            <span>{{ index + 1 }}</span> {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="box3" @click="myCreate(2)">
        <button>不重要紧急</button>

        <ul>
          <li v-for="(item, index) in arr3" :key="item.id">
            <span>{{ index + 1 }}</span> {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="box4" @click="myCreate(3)">
        <button>不重要不紧急</button>
        <ul>
          <li v-for="(item, index) in arr4" :key="item.id">
            <span>{{ index + 1 }}</span> {{ item.name }}
          </li>
        </ul>
      </div>
    </div>

    <transition
      enter-to-class="animate__animated animate__fadeInRight"
      enter-active-class="animate__animated animate__fadeInRight"
      leave-to-class="animate__animated animate__fadeOutLeftBig"
      leave-active-class="animate__animated animate__fadeOutLeftBig"
    >
      <div class="create" v-if="isCreate">
        <p>{{ str }}</p>
        <div class="form">
          <input v-model="things" placeholder="键入事项" type="text" />
        </div>
        <div class="return">
          <button @click="myReturn">«</button>
        </div>
        <div class="disc">
          <button @click="mySave"></button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Sixiangxian",
  data() {
    return {
      str: "重要且紧急",
      isCreate: false,
      val: 0,
      arr1: [
        //   { name: "11", id: "1" }
      ],
      arr2: [
        //   { name: "11", id: "1" }
      ],
      arr3: [
        //   { name: "11", id: "1" }
      ],
      arr4: [
        //   { name: "11", id: "1" }
      ],
      things: "",
    };
  },
  methods: {
    myCreate(i) {
      //   console.log(this);
      this.val = i;
      if (this.val == 0) {
        this.str = "重要且紧急";
      } else if (this.val == 1) {
        this.str = "重要不紧急";
      } else if (this.val == 1) {
        this.str = "不重要紧急";
      } else {
        this.str = "不重要不紧急";
      }

      this.isCreate = true;
    },
    myReturn() {
      this.isCreate = false;
    },
    mySave() {
      if (this.things.length == 0) {
        alert("键入不能为空");
        return false;
      }
      let obj = {};
      obj.name = this.things;
      

      if (this.val == 0) {
        obj.id = this.arr1.length;
        this.arr1.push(obj);
      } else if (this.val == 1) {
        obj.id = this.arr2.length;
        this.arr2.push(obj);
      } else if (this.val == 2) {
        obj.id = this.arr3.length;
        this.arr3.push(obj);
      } else {
        obj.id = this.arr4.length;
        this.arr4.push(obj);
      }

      this.things = "";
      this.isCreate = false;
    },
  },
};
</script>

<style lang="less" scoped>
.looksixiangxian {
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;
  .sixiangxian {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
    div {
      width: 149px;
      height: 220px;
      border-radius: 20px;
      margin-bottom: 10px;
      overflow: hidden;
      border: 2px dotted transparent;
      button {
        width: 100%;
        text-align: left;
        display: flex;
        align-items: flex-start;
        padding: 10px 15px;
        font-size: 15px;
        font-weight: bold;
        background-color: transparent;
      }
      ul {
        width: 100%;
        li {
          padding: 0px 5px;
          font-size: 18px;
          word-wrap: break-word; 
          word-break: normal;
        }
      }
    }
    .box1 {
      border-color: red;
      background-color: #f9bcce;
      color: #d00d1e;
    }
    .box2 {
      border-color: #ebb617;
      background-color: #ffecb4;
      color: #ebd62f;
    }
    .box3 {
      border-color: #0284dbd3;
      background-color: #b2eeef;
      color: #1e7fdd;
    }
    .box4 {
      border-color: green;
      background-color: #c8e6ca;
      color: #4cb080;
    }
  }
  .create {
    width: 100%;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    background-color: #fff;
    z-index: 10000;
    box-sizing: border-box;
    padding-top: 50px;
    p {
      height: 40px;
      font-size: 20px;
      padding: 15px 20px 5px;
      color: #808080;
    }
    .form {
      width: 100%;
      input {
        height: 50px;
        width: 100%;
        font-size: 20px;
        padding-left: 20px;
        background-color: #f0f0f0;
      }
    }
    .return {
      width: 30px;
      height: 30px;
      position: fixed;
      bottom: 50px;
      left: 20px;
      button {
        font-size: 40px;
        background-color: transparent;
      }
    }
    .disc {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      position: fixed;
      bottom: 30px;
      right: 30px;
      overflow: hidden;
      button {
        width: 100%;
        height: 100%;
        background-color: #1f1c1c;
      }
    }
  }
}
</style>